<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交流</title>
    <!-- <link rel="stylesheet" href="css/style.css"/> -->
    <link rel="stylesheet" href="{{static_url('css/normalize.css')}}" type="text/css"/>
    <link rel="stylesheet" href="{{static_url('css/chat.css')}}" type="text/css"/>
</head>
<style>
    li {
        list-style: none;
    }
</style>
<body>
<div class="chat">
    <div class="sidebar">
        <div class="m-card">
            <div class="head">
                <img class="avatar" width="50" height="50" src='{{static_url(he.icon)}}'>
                <p class="name">{{he.username}}</p>
            </div>
            <!--				<div class="footer">-->
            <!--					<p>卖家Id：<span class="receiveUserId">12345678901</span></p>-->
            <!--				</div>-->
        </div>
    </div>
    <div class="main">
        <div class="m-message">
            <ul>
                {% for record in records %}
                {% if record.who_send == he.id %}
                <li>
                    <p class="time"><span>{{record.send_time}}</span></p>
                    <div class="main">
                        <img class="avatar" width="30" height="30" src="{{static_url(he.icon)}}">
                        <div class="text">{{record.message}}</div>
                    </div>
                </li>
                {% else %}
                <li>
                    <p class="time"><span>{{record.send_time}}</span></p>
                    <div class="main self">
                        <img class="avatar" width="30" height="30" src="{{static_url(me.icon)}}">
                        <div class="text">{{record.message}}</div>
                    </div>
                </li>
                {% end %}
                {% end %}
            </ul>
        </div>
        <div class="m-text">
            <textarea id='send-message' placeholder="按 Ctrl + Enter 发送"></textarea>
        </div>
    </div>
</div>
</body>
<script src='{{static_url("js/jquery-3.2.1.min.js")}}'></script>
<script>
    $(function () {
        // 加载页面上翻
        $('.m-message').scrollTop(9999999999999);
        // 时间重复不显示
        var time_flag = 0;
        var time_list = $('.time');
        time_list.each(function () {
            if(time_flag!=0){
                if($(this).text() == $(time_list[time_flag-1]).text()){
                    $(this).css('display', 'none');
                }
            }
            time_flag += 1;
        });
        var ws = new WebSocket('ws://127.0.0.1:8888/chat-server');
        // 当前时间
        let myDate = new Date();
        let year = myDate.getFullYear();     //获取当前年
        let month = myDate.getMonth() + 1;   //获取当前月
        let date = myDate.getDate();         //获取当前日
        let h = myDate.getHours();           //获取当前小时数(0-23)
        let m = myDate.getMinutes();         //获取当前分钟数(0-59)
        let s = myDate.getSeconds();

        //判断是否在前面加0
        function getNow(s) {
            return s < 10 ? '0' + s : s;
        }

        var now = year + '-' + getNow(month) + "-" + getNow(date) + " " + getNow(h) + ':' + getNow(m) + ":" + getNow(s);
        ws.onmessage = function (e) {
            $('.m-message').append(
                "<li>\n" +
                "<p class=\"time\"><span>" + now + "</span></p>\n" +
                "<div class=\"main\">\n" +
                "<img class=\"avatar\" width=\"30\" height=\"30\" src=\"{{static_url(he.icon)}}\">\n" +
                "<div class=\"text\">" + e.data + "</div>\n" +
                "</div>\n" +
                "</li>"
            );
            // 滚动条上翻
            $('.m-message').scrollTop(99999999999999);
        };
        $('#send-message').keydown(function (event) {
            if (event.ctrlKey && event.which == 13) {
                let msg = $('#send-message').val();
                $('.m-message').append(
                    "<li>\n" +
                    "<p class=\"time\"><span>" + now + "</span></p>\n" +
                    "<div class=\"main self\">\n" +
                    "<img class=\"avatar\" width=\"30\" height=\"30\" src=\"{{static_url(me.icon)}}\">\n" +
                    "<div class=\"text\">" + msg + "</div>\n" +
                    "</div>\n" +
                    "</li>"
                );
                ws.send(msg);
                $("#send-message").val('');
                // 滚动条上翻
                $('.m-message').scrollTop(99999999999999);
            }
        })
    })
</script>
</html>
